import 'package:flutter/material.dart';

class GridNav extends StatefulWidget {
  @override
  _GridNavState createState() => _GridNavState();
}

class _GridNavState extends State<GridNav> {
  Color startColor = Colors.red;
  Color endColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return PhysicalModel(
      color: Colors.transparent,
      borderRadius: BorderRadius.circular(6),
      clipBehavior: Clip.antiAlias,
      child: Column(
        children: _gridNaviItems(context),
      ),
    );
  }

  List<Widget> _gridNaviItems(BuildContext context) {
    List<Widget> list = [];
    list.add(_gridNaviItem(context, true));
    list.add(_gridNaviItem(context, false));
    list.add(_gridNaviItem(context, false));
    return list;
  }

  Widget _gridNaviItem(BuildContext context, bool first) {
    List<Widget> list = [];
    List<Widget> rowList = [];
    list.add(_mainItem(context));
    list.add(_doubleItem(context));
    list.add(_doubleItem(context));

    list.forEach((element) {
      rowList.add(Expanded(
        child: element,
        flex: 1,
      ));
    });

    return Container(
      height: 88,
      margin: first ? null : EdgeInsets.only(top: 3),
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: [startColor, endColor]),
      ),
      child: Row(
        children: rowList,
      ),
    );
  }

  Widget _mainItem(BuildContext context) {
    return _wrapeGesture(
      context,
      Stack(
        alignment: AlignmentDirectional.topCenter,
        children: [
          Image.asset(
            "images/bg2.jpeg",
            fit: BoxFit.cover,
            width: 44,
            height: 44,
          ),
          Container(
            child: Text(
              'data',
              style: TextStyle(fontSize: 14, color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }

  Widget _doubleItem(BuildContext context) {
    return _wrapeGesture(
      context,
      Column(
        children: [
          Expanded(child: _item(context, true)),
          Expanded(child: _item(context, false)),
        ],
      ),
    );
  }

  Widget _item(BuildContext context, bool first) {
    BorderSide borderSide = BorderSide(width: 0.8, color: Colors.white);
    return FractionallySizedBox(
      widthFactor: 1,
      child: Container(
        decoration: BoxDecoration(
          border: Border(
            left: borderSide,
            bottom: first ? borderSide : BorderSide.none,
          ),
        ),
        child: _wrapeGesture(
          context,
          Center(
            child: Text(
              'data',
              style: TextStyle(
                fontSize: 14,
                color: Colors.white,
              ),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }

  Widget _wrapeGesture(BuildContext context, Widget child) {
    return GestureDetector(
      onTap: () {
        print('object');
      },
      child: child,
    );
  }
}
